<template>
  <scroll-view class="page-container" v-if="isInitState">
    <!-- 用户头像信息区域 -->
    <view class="headerBox">
      <nav-bar title="账号认证" background="#3FD3D1" color="#ffffff" textAlign="center"></nav-bar>
      <view class="header" :style="{marginTop:headerTop +'px'}">
        <image class="avatar" fit="cover" @click.stop="handlerPreviewAvatar"
          :src="editDataObj.userAvatar ? editDataObj.userAvatar : '/static/images/defaultAvatar.jpg'">
          </van>
      </view>
    </view>
    <!-- 弧状区域占位 -->
    <view class="headerFooter"></view>
    <!-- 内容区域 -->
    <view class="content">
<!--      <pre>
        {{JSON.stringify(editDataObj.userSchooluserSchool)}}
        {{JSON.stringify(editDataObj.userDepartment)}}
      </pre> -->
      <!-- 学校 -->
      <view class="contentItem">
        <view class="contentItemLeft">学校</view>
        <view class="contentItemRight">
          <picker title="选择学校" @change="(e)=>{handleAttrChange(e,'school')}" :value="schoolPickerIndex"
            :range="schoolList" style="width:100%">
            <view class="contentItemRightView">
              <text>{{schoolName}}</text>
              <uni-icons class="icon-right" custom-prefix="iconfont" type="icon-back" color="#545454" size="28rpx">
              </uni-icons>
            </view>
          </picker>
        </view>
      </view>
      <!-- 系别 -->
      <view class="contentItem">
        <view class="contentItemLeft">系别</view>
        <view class="contentItemRight">
          <picker @change="(e)=>{handleAttrChange(e,'department')}" :value="departmentPickerIndex"
            :range="departmentList" style="width:100%">
            <view class="contentItemRightView">
              <text>{{departmentName}}</text>
              <uni-icons class="icon-right" custom-prefix="iconfont" type="icon-back" color="#545454" size="28rpx">
              </uni-icons>
            </view>
          </picker>
        </view>
      </view>
      <!-- 姓名 -->
      <view class="contentItem">
        <view class="contentItemLeft">姓名</view>
        <view class="contentItemRight">
          <view class="contentItemRightView">
            <input v-if="stateObj.userNameState" auto-focus="true" maxlength="5" type="text" @click.stop=''
              v-model.trim="editDataObj.userName" class="userNameInput" @blur="hideState" />
            <view v-else class="contentItemRightView" @click.stop="showEdit('username')">
              <text>{{editDataObj.userName}}</text>
              <uni-icons custom-prefix="iconfont" type="icon-edit" color="#545454" size="28rpx"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 学号 -->
      <view class="contentItem">
        <view class="contentItemLeft">学号</view>
        <view class="contentItemRight">
          <view class="contentItemRightView">
            <input v-if="stateObj.userStunumState" auto-focus="true" maxlength="9" type="text" @click.stop=''
              v-model.trim="editDataObj.userStunum" class="userStunumInput" @blur="hideState" />
            <view v-else class="contentItemRightView" @click.stop="showEdit('stunum')">
              <text>{{editDataObj.userStunum}}</text>
              <uni-icons custom-prefix="iconfont" type="icon-edit" color="#545454" size="28rpx"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 认证 -->
      <view class="submitApprove" @click="handleSubmitApprove">认证</view>
    </view>
  </scroll-view>
</template>

<script>
  import {
    getSchoolApi,
    getDepartmentApi,
    getApproveApi,
    putApproveApi
  } from "@/api/my/approve.js"
  export default {
    data() {
      return {
        editDataObj: { // 修改的数据
          userAvatar: '',
          // 修改的用户姓名
          userName: '',
          // 修改的用户学号
          userStunum: '',
          // 修改的用户学校,
          userSchool: '',
          // 修改的用户学校系别
          userDepartment: ''
        },
        stateObj: { // 状态
          // 用户姓名状态
          userNameState: false,
          // 用户学号状态
          userStunumState: false,
          // 学校选择状态
          selectSchoolStart: false,
          // 系别选择状态
          selectDepartmentStart: false,
        },
        schoolPickerIndex: 0, // 选择器下标
        schoolObjList: [], // 学校获取列表

        departmentPickerIndex: 0, // 选择器下标
        departmentObjList: [], // 系别获取列表

        isInitState: false, // 初始状态
        initDataObj: {}, // 初始数据
        headerTop: 0 // 距离
      };
    },
    // 每次显示的时候从本地缓存中获取一下最新用户对象
    onLoad() {
      this.handleGetApproveObj()
      this.headerTop = this.mxCapsuleTop + this.mxCapsuleHeight
    },
    computed: {
      // 学校名称
      schoolName() {
        let find = this.schoolObjList.find(item => item.classId == this.editDataObj.userSchool);
        return find ? find.title : '请选择';
      },
      // 学校列表
      schoolList() {
        return this.schoolObjList.map(item => item.title);
      },
      // 系别名称
      departmentName() {
        let find = this.departmentObjList.find(item => item.classId == this.editDataObj.userDepartment);
        return find ? find.title : '请选择';
      },
      // 系别列表
      departmentList() {
        return this.departmentObjList.map(item => item.title);
      }
    },
    methods: {
      // 获取学校
      async handleGetSchoolList() {
        const {
          data: result
        } = await getSchoolApi()
        if (result.success) {
          this.schoolObjList = result.data.schoolInfo;
          this.getDepartmentList()
        }
      },
      // 获取系部
      async getDepartmentList(search = false) {
        const {
          data: result
        } = await getDepartmentApi(this.editDataObj.userSchool)
        if (result.code == 200) {
          this.departmentObjList = result.data.department
          if (search) {
            this.editDataObj.userDepartment = this.departmentObjList[0].classId
          } else {
            // 假如获取的用户数据内没有选择系别 则默认选择第一个
            if (!this.editDataObj.userDepartment) {
              // this.editDataObj.userSchool = this.schoolObjList[0].classId
              this.editDataObj.userDepartment = this.departmentObjList[0].classId
            }
          }
          this.departmentPickerIndex = this.departmentObjList.findIndex(item => item.classId == this
            .editDataObj.userDepartment)
        }
      },
      // 获取个人资料数据
      async handleGetApproveObj() {
        uni.showLoading({
          mask: true
        })
        const {
          data: result
        } = await getApproveApi();
        if (result.code != 200) {
          uni.showToast({
            title: "网络异常，稍后重试！",
            icon: "none"
          })
        }
        let info = result.data.info;
        this.editDataObj = {
          userAvatar: info.avatar || '',
          userName: info.str_name || '',
          userSchool: info.parentId,
          userDepartment: info.class_id,
          userStunum: info.str_number || 0,
        }
        this.initDataObj = JSON.parse(JSON.stringify(this.editDataObj))
        this.handleGetSchoolList()
        this.isInitState = true
        uni.hideLoading();
      },
      // 预览头像
      handlerPreviewAvatar() {
        uni.previewImage({
          current: this.editDataObj.userAvatar, // 当前显示图片的http链接
          urls: [this.editDataObj.userAvatar]
        })
      },
      // 显示
      showEdit(type) {
        this.hideState()
        if (type == 'school') {
          this.pickerIndex = this.schoolList.findIndex(item => item == this.editDataObj.userSchool)
          this.stateObj.selectSchoolStart = true
        } else if (type == 'department') {
          this.getDepartmentList()
          this.stateObj.selectDepartmentStart = true
        } else if (type == "username") {
          this.stateObj.userNameState = true
        } else if (type == "stunum") {
          this.stateObj.userStunumState = true
        }
      },
      // 隐藏选择器
      hideOverlay() {
        this.hideState()
        this.stateObj.selectSchoolStart = false
        this.stateObj.selectDepartmentStart = false
      },
      // 隐藏状态
      hideState() {
        this.stateObj.userNameState = false
        this.stateObj.userStunumState = false
      },
      // 下拉选择chang事件
      handleAttrChange(e, type) {
        let value = e.detail.value;
        if (type == 'school') {
          this.editDataObj.userSchool = this.schoolObjList[value].classId;
          this.schoolPickerIndex = value;
          this.getDepartmentList(true)
        } else if (type == 'department') {
          this.editDataObj.userDepartment = this.departmentObjList[value].classId;
          this.departmentPickerIndex = value;
        }
      },

      // 认证
      async handleSubmitApprove() {
        let initDataObj = Object.values(this.initDataObj)
        let editDataObj = Object.values(this.editDataObj)
        let isChange = false
        for (let i = 0; i < initDataObj.length; i++) {
          if (initDataObj[i] != editDataObj[i]) {
            isChange = true
            break;
          }
        }

        const requestData = {
          avatar: this.editDataObj.userAvatar,
          classId: this.editDataObj.userDepartment,
          strName: this.editDataObj.userName,
          strNumber: this.editDataObj.userStunum,
        }

        if (!requestData.strName) {
          uni.showToast({
            title: "请填写姓名",
            icon: "none"
          })
          return;
        }
        if (!requestData.strNumber) {
          uni.showToast({
            title: "请填写学号",
            icon: "none"
          })
          return;
        }

        const {
          data: result
        } = await putApproveApi(requestData)
        if (!result.success) {
          uni.showToast({
            title: result.message,
            icon: "none"
          })
          return;
        }
        this.initDataObj = JSON.parse(JSON.stringify(this.editDataObj))
        uni.showToast({
          title: "认证成功",
          icon: "none",
          complete: () => {
            uni.switchTab({
              url: "/pages/my/my"
            })
          }
        })



      }
    },

  }
</script>

<style lang="scss" scoped>
  .page-container {
    height: 100vh;
    width: 100%;
    background: #ffffff;

    // 用户头像区域
    .headerBox {
      width: 100%;
      background: #3FD3D1;
      overflow: hidden;

      .header {
        width: 260rpx;
        height: 260rpx;
        margin: 0rpx auto;
        padding-top: 58rpx;
        display: flex;
        justify-content: center;

        .avatar {
          width: 260rpx;
          height: 260rpx;
          border-radius: 50%;
        }
      }
    }

    // 弧状区域占位
    .headerFooter {
      width: 110%;
      margin-left: -5%;
      height: 86rpx;
      background: #3FD3D1;
      border-radius: 0rpx 0rpx 50% 50%;
    }

    // 内容区域
    .content {
      margin: 96rpx 32rpx 0rpx 32rpx;
      padding-bottom: 54rpx;

      .contentItem {
        margin: 48rpx 0rpx;
        display: flex;
        height: 38rpx;
        align-items: center;
        font-size: 28rpx;

        .contentItemLeft {
          width: 20%;
          color: #333333;
        }

        .contentItemRight {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          text {
            font-size: 28rpx;
            color: #333333;
          }

          .contentItemRightView {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .icon-right {
              display: inline-block;
              transform: rotateZ(180deg);
            }
          }
        }

        .userNameInput,
        .userStunumInput {
          color: #333333;
          font-size: 28rpx;
          height: 100%;
          width: 100%;
        }

        view {
          display: flex;
        }

        &:last-child {
          color: #EA7B7B;
          margin-bottom: 0rpx !important;
        }
      }

      // 认证按钮
      .submitApprove {
        margin: 120rpx 0rpx 80rpx 0rpx;
        height: 96rpx;
        background: #3FD3D1;
        color: #ffffff;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    // 选择器盒子
    .pickerBox {
      position: fixed;
      bottom: 0rpx;
      width: 100%;
      left: 0rpx;
      z-index: 999;
    }
  }
</style>